<template>
  <div v-if="model&&model.modelKey=='topBar'" :key="model.modelKey" class="model_box logo-box">
    <div style="height: 100%;" class="flex fbt alc">
      <div class="logoname flex alc">
        <img v-if="model.logoShow" class="logo" :src="model.logoImg" mode="" />
        <div class="name" :style="`color:${model.txtColor};`" v-if="model.nameShow">
          <div>{{model.name||''}}</div>
          <div class="des" :style="`color:${model.desColor};`">
            {{ model.des||'' }}
          </div>
        </div>
      </div>
      <div v-if="model.kefuShow" class="kefu-box">
        <img :src="model.kefuImg" mode="">
      </div>
    </div>
    <zhezhao @clickSet="clickItem('set')" :hidetxt="true"></zhezhao>
  </div>
</template>

<script>
import zhezhao from '../zhezhao.vue';
export default {
  components:{zhezhao},
  props: {
    model: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    clickItem(type) {
      this.$emit('clickItem', {type: type, modelKey: this.model.modelKey})
    }
  }
}
</script>
<style lang="scss" scoped>

.logo-box {
  height:50px;

  margin-top: 0 !important;
      .logoname {
        .logo {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          margin-right: 5px;
        }

        .name {
          font-weight: bold;
          font-size: 16px;
          .des{
            width: 190px;
            overflow: hidden;
            font-weight: 400;
            font-size: 12px;
          }
        }
      }

      .kefu-box {
        flex-shrink: 0;
        text-align: center;

        img {
          width: 36px;
          height: 36px;
        }
      }
    }
</style>